<html>
<head>
<title>Ajax With Django</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="/site_media/mashup/js/jquery/jquery.js" type="text/javascript"></script>
<script src="/site_media/mashup/js/jquery/ajax.js" type="text/javascript"></script>
<script src="/site_media/mashup/js/jquery/event.js" type="text/javascript"></script>
<script src="/site_media/mashup/js/jquery/jquery.tabs.js" type="text/javascript"></script>

<script type="text/javascript">

show_data = function(data, formater, container)
{		
   
    data=eval(data);    
    for(i=0; i<data.length; i++){
          formater(data[i], container);				   
    }				
}

strip_tags_except_a = function(src)
{
    return src.replace(/(<\s*[^a]([^>]+)>)/ig,""); 
}

hide_short_description = function(desc)
{
    if (desc.length < 20)
        return ""
    return desc
}

article = function(item, container)
{	
    desc = hide_short_description( strip_tags_except_a(item.fields.description) )
    $("#" + container).append( '<li><a href="' + item.fields.link +	'">' + item.fields.title 
                                            + '</a><br/>' + desc + '</li><br/>' );	
}

photo = function(item, container)
{								
     $("#" + container).append( '<li>' + item.fields.title + '<br/><img src="' + item.fields.link 
                                                +	'"/></li><br/>') ;	
}

show_digg = function(data){   show_data(data, article, "digg"); }
show_delicious = function(data){ show_data(data, article, "delicious"); }
show_boingboing = function(data){ show_data(data, article, "boingboing"); }
show_photo = function(data){ show_data(data, photo, "flickr"); }

$( function(){   
    $.getJSON("/mashup/ajax/digg/",show_digg);		
    $.getJSON("/mashup/ajax/delicious/",show_delicious);
    $.getJSON("/mashup/ajax/boingboing/",show_boingboing);
    $.getJSON("/mashup/ajax/flickr/",show_photo);  
    $('#tab_container').tabs();
    $('#surfing_container').tabs();
});

</script>
<link rel="stylesheet" href="/site_media/mashup/css/tabs.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="/site_media/mashup/css/mashup.css" type="text/css" media="screen">

</head>
<body>
<div id="all_content" >
{% include "header.html" %}
<div id="tab_container">
 <ul class="anchors" id="main_anchors">
    <li><a href="#surfing_container">Surfing</a></li>
    <li><a href="#toolbox">Toolbox</a></li>
 </ul>
 <div id="surfing_container">
    <ul class="anchors" id="surfing_anchors">
        <li><a href="#digg">digg</a></li>
        <li><a href="#delicious">delicious</a></li>
        <li><a href="#boingboing">boingboing</a></li>
        <li><a href="#flickr">flickr</a></li>
    </ul>
    <div id="digg" class="fragment">           
    </div>
    <div id="delicious" class="fragment">       
    </div>
    <div id="boingboing" class="fragment">      
    </div>
    <div id="flickr" class="fragment">      
    </div>
 </div>
 <div id="toolbox_container">
 </div>
</div>
{% include "footer.html" %}
</div>
</body>
</html>



